<template>
  <div class="index">
    <h3>easy姓名:{{username}}</h3>
    <h3>easy性别:{{sex}}</h3>
    <h3>easy性别:{{supSex('人')}}</h3>
    <h3>easy年龄:{{age}}</h3>
    <h3>easy工资:{{price}}</h3>
    {{test}}
    <input type="number" v-bind:value="age" v-on:input="setAge"/>
    <br>
    <label>
      工资变动,
      <input type="number" v-model='addPriceNumber'/>
    </label>
    <button type="button" v-on:click="addPrice" >加工资</button>
    <button type="button" v-on:click="priceAdd(addPriceNumber)" >加奖金</button>
    <button type="button" v-on:click="getUserList" >获取集合</button>
    <button type="button" v-on:click="actionsGetUserList" >异步获取集合</button>
    <ul v-for="user in userList">
      <li>{{ user.id }}</li>
      <li>{{ user.username }}</li>
      <li>{{ user.gender }}</li>
    </ul>
  </div>
</template>

<script>
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";
import axios from "axios";

export default {
  name: "indexEasy",
  data(){
    return {
      addPriceNumber : 0,
    }
  },
  computed: {
    test(){
      return '输入框'
    },
    sex(){
      return this.$store.getters.getEs6Sex('性')
    },
    ...mapState({
      username : state => state.username,
      age: state => state.age,
      price: state => state.price,
      userList: state => state.userList,
    }),
    ...mapGetters({
      'supSex' : "getSex"
    })
  },
  methods: {
    setAge(){
      console.log(event);
      this.$store.commit('setAge', event.target.value);
    },
    addPrice(){
      this.$store.commit('addPrice', this.addPriceNumber);
    },
    ...mapMutations({
      'priceAdd' : "addPrice",
      'getUserList' : "getUserList"
    }),
    ...mapActions({
      'actionsGetUserList' : 'actionsGetUserList',
    })
  }
}
</script>

<style scoped>

</style>